<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./swiper.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      /* color:#000; */
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .swiper-container {
      width: 100%;
      padding-top:40px;
      height: 320px;
      /* background-color: blue; */
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
        height: 140px;
        /* background-color: black; */
      /* display: flex; */
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8) !important;
    }
    img{
        width: 100%;
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1.4) !important;
	}
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          <img src="../images/main/_22.gif" alt="" onclick="openWinds('widget://pages/ecology/list.stml','独立生态')">
          <div style="color: #fff;">独立生态</div>
      </div>
      <div class="swiper-slide">
        <img src="../images/main/_32.gif" alt="" onclick="goWebSite()">
        <div style="color: #fff;">通证浏览器</div>
      </div>
      <div class="swiper-slide">
        <img src="../images/main/_42.gif" alt="" onclick="openWinds('widget://pages/article/detail.stml','学习园地')">
        <div style="color: #fff;">学习园地</div>
      </div>
      <div class="swiper-slide">
        <img src="../images/main/_52.gif" alt="" onclick="openWinds('widget://pages/user/user.stml','个人中心')">
        <div style="color: #fff;">个人中心</div>
        </div>
        <div class="swiper-slide">
        <img src="../images/main/_62.gif" alt="" onclick="openWinds('widget://pages/article/news.stml','最新资讯')">
        <div style="color: #fff;">最新资讯</div>
        </div>
        <div class="swiper-slide">
        <img src="../images/main/_72.gif" alt="" onclick="openWinds('widget://pages/cart/cart.stml','发现')">
        <div style="color: #fff;">发现</div>
        </div>
        <div class="swiper-slide">
            <img src="../images/main/_82.gif" alt="" onclick="openWinds('widget://pages/sort/sort.stml','签到')">
            <div style="color: #fff;">签到</div>
        </div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="./swiper.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
	  centeredSlides: true,
	  loop: true,
      autoplay:true,
      on:{
        slideChange:() => { 
          },
      }
    });
    function goWebSite(){
			api.openApp({
				mimeType: 'text/html',
				uri: "https://testgtk.lvliango.com/",
				iosUrl:"https://testgtk.lvliango.com/"
			}, function(ret, err) {
				if (ret) {
					
				} else {
					
				}
			});
		}
    function openWinds(url,title="资讯"){
      api.setStatusBarStyle({
        style: "dark"
      })
        var param = {
                name: 'common',
                url:url,
                bgColor: '#fff',
                title:title,
                    color: "#333"  ,                 //（可选项）导航栏标题文字颜色。默认值#000，字符串类型
                fontSize:  16,         //（可选项）导航栏标题字体大小。默认值17，数字类型
                fontWeight:"bold" ,
                allowEdit:true,
                navigationBar:{
                    background:"#fff",
                    leftButtons:[{
                        iconPath:"widget://images/common/back_b.png",
                        scale:2,
                        text:"返回",
                        color:"#333"
                        //（可选项）图片的缩放倍数，默认为 4，数字类型。显示规则：当 scale 值为 3 时，若设备上面期望显示的图标尺寸为 30*25，则图片实际尺寸需要为 90*75。
                    }]
                }
            }
            api.openTabLayout(param);
    }
  </script>
</body>
</html>
